import React, { useState } from 'react';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card, Row, Col, Button, Tag } from 'antd';
import PubSub from "pubsub-js"
import style from "./index.module.css"
const { Meta } = Card;

const FoodItem = (props) => {
  const { data: { defaultImg, name, price, status, description, id },setVisible } = props
  
  const handleClick = ()=>{
    PubSub.publish('editData',{
      id,name,defaultImg,price,status,description
    })
    setVisible(true)
  }

  return (
    <Card
      style={{
        width: 300,
        height:500
      }}
      cover={
        <img
          alt="food"
          src={defaultImg}
        />
      }
      actions={[
        <EditOutlined key="edit" onClick={handleClick}/>
      ]}
    >
      <Meta
        title={name}
        description={
          <>
          <Row style={{minWidth:'250px'}}>
            <Col span={18}>
              {description.substring(0,39)}
            </Col>
            <Col span={6} className={style.price}>
              ￥{price}
            </Col>
          </Row>
          {
            status===1?<Tag color="#4de900">出售中</Tag>:<Tag color="#fbb62e">暂未出售</Tag>
          }
          </>
        }
      />
    </Card>
  )
}

export default FoodItem;